<template>
	<div class="list_type">
		<div class="row">
			<div v-for="(o, i) in list" :key="i" :class="'col-' + col">
				<a :href="url + o[vm.item_id]" class="item">
					<img style="width: 100%; height: auto;" src="o[vm.img] || ../../static/logo.png" mode="widthFix"/>
					<div><span>{{ o[vm.name] }}</span></div>
				</a>
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		props: {
			url: {
				type: String,
				default: '/item/details?item_id='
			},
			list: {
				type: Array,
				default: function() {
					return [];
				}
			},
			vm: {
				type: Object,
				default: function() {
					return {
						item_id: "item_id",
						img: "img",
						name: "name"
					}
				}
			},
			span: {
				type: Number,
				default: 2
			}
		},
		data() {
			var col = 12 / this.span;
			return {
				col
			}
		}
	}
</script>

<style scoped>
	.row {
		justify-content: flex-start;
	}

	.item {
		padding: .75rem;
	}

	.price {
		color: var(--color_orange);
		font-weight: 600;
	}

	.price_ago {
		margin-left: .5rem;
		text-decoration: line-through;
		font-size: 0.875rem;
		color: #999;
	}
</style>
